/*
 * ADOBE CONFIDENTIAL
 *
 * Copyright 2016 Adobe Systems Incorporated
 * All Rights Reserved.
 *
 * NOTICE:  All information contained herein is, and remains
 * the property of Adobe Systems Incorporated and its suppliers,
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to Adobe Systems Incorporated and its
 * suppliers and may be covered by U.S. and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from Adobe Systems Incorporated.
 */

/*
 * Utility class for promise viewer loader
 */
var S7dmUtils = S7dmUtils || {};

(function (S7dmUtils) {
    S7dmUtils = S7dmUtils || {};

    /**
     * Viewer Loader Helper
     */
    S7dmUtils.Viewer = function () { };

    //Max retry for viewer readiness check
    S7dmUtils.Viewer.RETRY_JS_MAX = 50;

    //retry count
    S7dmUtils.Viewer.prototype.retryCount = 0;

    //list of viewers to load
    S7dmUtils.Viewer.prototype.viewerList = null;

    /**
     * @param viewerList viewer list JSON object
     * @return current S7dmUtils.Viewer object
     */
    S7dmUtils.Viewer.prototype.load = function (viewerList, viewerRootPath) {
        //Check the viewer loader first so we don't load viewer multiple time
        if (!this.isAllLoaded(viewerList)) {
            this.viewerList = viewerList;
            for (var viewer in viewerList) {
                $('head').append('<script type="text/javascript" src="' + viewerRootPath + viewerList[viewer] + '"></script>');
            }
        }
        return this;
    }

    /**
     * Check viewer readiness with retry-loop. 
     * When the viewer is ready, the subsequent function for success case gets called;
     * otherwise, we call fail case.
     * @param fn function to deal with success/fail viewer loader in format { success: fn1, fail: fn2}
     */
    S7dmUtils.Viewer.prototype.ready = function (fn) {
        if (typeof s7viewers != 'undefined' && (this.viewerList == null || this.isAllLoaded(this.viewerList))) {
            fn.success.call();
        }
        else { //retry until the viewers are all loaded or reached max load time
            var $this = this;
            this.retryCount++;
            if (this.retryCount < S7dmUtils.Viewer.RETRY_JS_MAX) {
                setTimeout(function () { $this.ready(fn) }, 100);
            }
            else {
                fn.fail.call();
            }
        }
    }


    /**
     * @private
     * @param viewerList viewer list with key as viewer constructor (s7viewers.*)
     * @return true when all the viewers in the list are loaded.
     */
    S7dmUtils.Viewer.prototype.isAllLoaded = function (viewerList) {
        //check basic s7viewers object first - if none, no viewer 
        if (typeof s7viewers == 'undefined') {
            return false;
        }
        for (var viewer in viewerList) {
            //check viewer against the list - if one of them is not loaded, then it's not all loaded.
            if (viewer == "Responsive") {
                if (typeof s7responsiveImage == 'undefined') {
                    return false;
                }
            } else if (typeof s7viewers[viewer] == 'undefined') {
                return false;
            }
        }
        return true;
    }
})(S7dmUtils);

customElements.define('nwg-picture-dmm',
    class extends HTMLElement {
        constructor() {
            super();
            let style = document.createElement("style");
            style.innerHTML = ":host {width: 100%; height: 100%; display: grid; place-items: center; overflow:hidden;} img {object-fit: cover; width: 100%;}";
            const shadowRoot = this.attachShadow({
                mode: 'open'
            })
                .appendChild(style.cloneNode(true))
        }

        connectedCallback() {
            let alternateVal = "", mode = "", breakpointsVal = "", title = "", idVal="", hrefVal="", classVal="fluidimage";
            alternateVal = this.getAttribute("data-alt");
            let baseImg = this.getAttribute("base-image");
            let baseImg1 = this.getAttribute("base-image1");
            breakpointsVal = this.getAttribute("breakpoints");
            idVal = this.getAttribute("id");
            hrefVal = this.getAttribute("href");
            let image = document.createElement("img");
            mode = this.getAttribute("data-mode");
            let hd = this.getAttribute('enablehd') == "never" ? "never" : "always";
            title = this.getAttribute('data-title');
            if(idVal) {
                image.setAttribute('id', idVal+ '_resp');
            }
            if(mode == "smartcrop"){
                image.src = baseImg1 + "&wid=" + Math.round(this.getBoundingClientRect().width) + "&dpr=off";
                image.setAttribute('data-src', baseImg1);
            }
            else{
                image.src = baseImg + "&wid=" + Math.round(this.getBoundingClientRect().width) + "&dpr=off";
                image.setAttribute('data-src', baseImg); 
            }
           
            let h = Math.round(this.getBoundingClientRect().height);
            if (h) {
                image.height = h;
            }  
            if (alternateVal) {
                image.setAttribute('alt', alternateVal);
            }
            else {
                image.setAttribute('alt', "");
                image.setAttribute('role', 'presentation');
            }
            if (mode) {
                image.setAttribute("data-mode", mode);
            }
            if(breakpointsVal) {
                image.setAttribute('data-breakpoints', breakpointsVal);
            }
            if(classVal) {
                image.setAttribute('class', classVal);
            }
            if(hrefVal) {
                image.setAttribute('href', hrefVal);
            }
            if(title) {
                image.setAttribute('title', title);
            }
            image.setAttribute("data-enablehd", hd);
            let w = "width : 100%";
            if (w) {
               image.setAttribute('style', w);
            }
            this.shadowRoot.appendChild(image);
            window.addEventListener('resize', this.getDMMImage.bind(this));
        }

        getDMMImage() {
            let baseImg = this.getAttribute("base-image");
            let currImage = this.shadowRoot.querySelector("img");
            currImage.src = baseImg + "&wid=" + Math.round(this.getBoundingClientRect().width) + "&dpr=off";
            let h = Math.round(this.getBoundingClientRect().height);
            if (h) {
                currImage.height = h;
            }
        }

    }
);